<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#sun{
			width:200px; height: 200px; background: orange;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//缓冲运动 不定点的圆周运动 例如月亮 地球 和 太阳的关系
		onload = function(){
			var sun = document.getElementById("sun");
			var earth = document.getElementById("earth");
			var moon = document.getElementById("moon");
			//首先太阳不动 地球围绕太阳做圆周运动 则确定中心点
			var center_sun = {x:sun.offsetLeft + sun.offsetWidth/2, y:sun.offsetTop + sun.offsetHeight/2};
			//自定义一个地球绕太阳转的起始角度 和 月亮绕地球转的起始角度
			var dargee_earth = 0;
			var dargee_moon = 90;
			setInterval(function(){
				//地球绕太阳转
				earth.style.left = center_sun.x + 300*Math.cos(dargee_earth*Math.PI/180) - earth.offsetWidth/2 + "px";
				earth.style.top = center_sun.y + 300*Math.sin(dargee_earth*Math.PI/180) - earth.offsetHeight/2 + "px";
				
				//月亮绕地球转
				//实时获取地球中心点
				var center_earth = {x:earth.offsetLeft + earth.offsetWidth/2, y:earth.offsetTop + earth.offsetHeight/2};
				moon.style.left = center_earth.x + 70*Math.cos(dargee_moon*Math.PI/180) - moon.offsetWidth/2 + "px";
				moon.style.top = center_earth.y + 70*Math.sin(dargee_moon*Math.PI/180) - moon.offsetHeight/2 + "px";
				
				//设定地球和月亮转动角度变化速度
				dargee_earth += 1;
				dargee_moon += 10;
			},30);
		}
	</script>
	<body>
		<div id="sun">
			
		</div>
		<div id="earth" style="width: 50px; height: 50px; border-radius: 50%; position: absolute; left:400px; top: 200px; background: blue;">
			
		</div>
		
		<div id="moon" style="width: 30px; height: 30px; border-radius: 50%; position: absolute; left:300px; top: 200px; background: gray;">
			
		</div>
	</body>
</html>
